
import React, { Component } from 'react';

class P14 extends Component {
    state = { ischange: true }
    render() {
        return (<div>
            {
                this.state.ischange ? <P15></P15> : <P16></P16>
            }

            <button onClick={() => { this.setState({ ischange: !this.state.ischange }) }}>切换到P16组件</button>
        </div>);
    }
}

export default P14;

class P15 extends Component {
    state = {}
    render() {
        console.log('1.0 render');
        return (<div>
            P15
        </div>);
    }
    interval = null
    // 1.0 定义卸载时的生命周期钩子函数
    componentWillUnmount() {
        console.log('2.0 componentWillUnmount');

        // 销毁组件的时候清除定时器
        console.log(this.interval);
        clearInterval(this.interval)
    }

    componentDidMount() {
        // 开启定时器，轮询机制
        this.interval = setInterval(() => {
            console.log('确定订单状态');
        }, 1000);
    }
}

class P16 extends Component {
    state = {}
    render() {
        return (<div>
            P16
        </div>);
    }
}
